<template>
  <div class="div-box">
    <div class="left-box">后台管理</div>
    <div style="flex: 1;"></div>
    <!-- <div class="right-box"> -->
      <el-dropdown class="right-box">
        <span class="el-dropdown-link">
          张三
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>个人信息</el-dropdown-item>
            <el-dropdown-item>退出系统</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    <!-- </div> -->

  </div>
</template>

<script>
import { ArrowDown } from '@element-plus/icons-vue'
export default {
  name: "Header",
  components: { ArrowDown },
  props: {},
  data() {
    return {
    };
  },
  watch: {},
  computed: {},
  methods: {},
  created() { },
  mounted() { }
};
</script>

<style scoped>
.div-box {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
  display: flex;
}

.left-box {
  width: 200px;
  padding-left: 30px;
  font-weight: bold;
  color: dodgerblue;
}

.right-box {
  /* width: 100px;
  padding: 17px 0px 0px 25px; */
  width: 100px;
  align-items: center;
  justify-content: center;
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>